<template>
  <div class="hot">
    <div class="top-bg">
      <div class="hot-b spirit">
      </div>
      <p>更新日期: {{ month + '月' + day }}日</p>
    </div>

    <div class="song-list">
      <single-song v-for="(item, i) in hotSongs" :key="i" :item="item" :song="song" :paused="paused"
        @click.native="$emit('change-current-song', { song: item, songList: hotSongs })">
        <template #rank>
          <div class="num">{{ (Math.floor(i / 9) === 0) ? '0' + (i + 1) : (i + 1) }}</div>
        </template>

      </single-song>
      <div class="bottom-more">查看完整榜单 > </div>
    </div>


  </div>
</template>

<script>
import SingleSong from '@/components/SingleSong.vue'
export default {
  props: ['song', 'paused'],

  data() {
    return {
      month: 1,
      day: 1,

      hotSongs: [],
    }
  },

  components: {
    SingleSong,
  },

  created() {
    this.getNowTime()
    this.axios.get('/playlist/track/all?id=3778678&limit=20').then((res) => {
      // console.log(res.data.songs)
      this.hotSongs = res.data.songs
    })
  },

  computed: {

  },

  methods: {
    getNowTime() {
      let date = new Date();
      this.month = date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1
      this.day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
    }
  }
}
</script>

<style lang='scss'>
$red: #df3436;
$grey: #888;

.hot {
  background: url('../../images/hot-bg.jpg') no-repeat;
  background-size: contain;

  .spirit {
    background: url('../../images/icon-play.png') no-repeat;
    background-size: 166px 97px;
  }

  .top-bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    height: 146px;

    .hot-b {
      width: 142px;
      height: 67px;
      background-position: -24px -30px;
    }

    p {
      margin-top: 10px;
      color: hsla(0, 0%, 100%, .8);
      font-size: 12px;
    }
  }

  .song-list {

    .num {
      margin-right: 10px;
      font-size: 17px;
      color: $grey;
    }

    .song-li:nth-child(-n+3) .num {
      color: $red;
    }
  }

  .bottom-more {
    height: 55px;
    font-size: 14px;
    color: $grey;
    text-align: center;
    line-height: 55px;
  }

}
</style>
